<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as an audio player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#list>ul>li").dblclick(function () {
		var nowPlay = $(this).html();
		$("#jquery_jplayer_1").jPlayer("clearMedia");
		$("#lrc>ul").empty();
		play(nowPlay,true);
	});
	
	play($("#list>ul>li").eq(0).html(),true);
	// play();
	function play(m,p) {
		var txt = new Array();
		var lrc = new Array();

		$.ajax({
			type: "GET",
			url: "lrc/" + m + ".lrc",
			dataType: "text",
			success: function(data){
				
				txt = data.split("\n");

				for (var i = 0; i < txt.length; i++) {
					
					lrc[i] = new Array();
					lrc[i][0] = txt[i].substr(1,8);
					lrc[i][1] = txt[i].substr(10);

					$("#lrc>ul").append("<li>" + lrc[i][1] +"</li>");

				}
			}
		});

		$("#jquery_jplayer_1").jPlayer({
			ready: function (event) {
				$(this).jPlayer("setMedia", {
					mp3:"music/" + m + ".mp3"
				});
				console.log("1");
				if (p) {
					$(this).jPlayer("play");
				}
			},
			timeupdate : function (obj){
	            var time1 = Math.floor(obj.jPlayer.status.currentTime);

	        	for (var i = 0; i < lrc.length; i++) {
	        		var time2 = lrc[i][0].split(":");
	        		time2 = parseInt(time2[0]) * 60 + parseInt(time2[1]);
	        		if (time1 == time2) {
	        			
	        			$("#lrc>ul>li").removeClass().eq(i).addClass("now");
	        			$("#lrc>ul").animate({"top":  -24 * i + "px"},200,function () {return});
	        			
	        		}
	        	}
	        },
			        
	        ended: function (event) {
	        	$("#lrc>ul").css("top","0");
	            // $(this).jPlayer("play");
	        },
			swfPath: "js",
			supplied: "mp3",
			wmode: "window"
		});	
	}

});

</script>

<style type="text/css">
.now {
	color: blue;
	font-weight: bold;
}

#lrc {
	width: 420px;
	height: 300px;
	overflow: hidden;
	font-size: 12px;
	position: relative;;
}
#lrc ul {
	margin: 0;
	padding: 50px 0 0 10px;
	position: absolute;
	width: 410px;
	top: 0;
	left: 0;
}
#lrc ul li {
	list-style-type: none;
	height: 24px;
	line-height: 24px;
}
</style>
</head>
<body>

	<div id="jquery_jplayer_1" class="jp-jplayer"></div>

	<div id="jp_container_1" class="jp-audio">

			<div class="jp-interface">
				<ul class="jp-controls">
					<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
					<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
					<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
					<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
					<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
					<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
				</ul>
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
				<div class="jp-time-holder">
					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
				</div>
			</div>
			<div class="jp-title">Cro Magnon Man</div>

	</div>

	<div id="lrc"><ul></ul></div>

	<div id="list">
		<ul>
			<li>逍遥叹</li>
			<li>六月的雨</li>
			<li>向天再借五百年</li>
		</ul>
	</div>
</body>

</html>
